<template>
  <div class="body">
    <el-menu
      :default-active="activeIndex"
      background-color="#F5F6FA"
      active-text-color="#1795FF"
      text-color="#333333 "
      class="el-menu-demo"
      mode="horizontal"
    >
      <el-menu-item @click="companylist(-1)" index="0">所有</el-menu-item>
      <el-menu-item @click="companylist(1)" index="1">待申请</el-menu-item>
      <el-menu-item @click="companylist(2)" index="2">待审核</el-menu-item>
      <el-menu-item @click="companylist(3)" index="3">已通过</el-menu-item>
      <el-menu-item @click="companylist(4)" index="4">已拒绝</el-menu-item>
    </el-menu>
    <el-row class="mb8">
      <el-col :span="19">
        <el-button
          type="info"
          @click="shuaxin"
          icon="el-icon-refresh-right"
        ></el-button>
        <el-button type="success" @click="handleAdd" icon="el-icon-plus"
          >申请续保</el-button
        >
      </el-col>
      <el-col :span="5" class="seach">
        <el-input
          v-model="params.keywords"
          placeholder="请输入关键字"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="seach"
        ></el-button>
      </el-col>
    </el-row>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      class="table"
      @selection-change="handleSelectionChange"
      height="100%"
    >
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column
        align="center"
        prop="apply_number"
        label="申请编号"
        show-overflow-tooltip
        width="280"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="guarantee_apply_number"
        label="保函编号"
        show-overflow-tooltip
        width="280"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="apply_name"
        label="保函名称"
        show-overflow-tooltip
        width="200"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="apply_reason"
        label="续保原因"
        show-overflow-tooltip
        width="120"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="margin_amount"
        label="续保金额"
        show-overflow-tooltip
        width="120"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="user_cardname"
        label="续保人"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="begin_time"
        label="续保起始时间"
        width="180"
        show-overflow-tooltip
      >
        <!-- <template slot-scope="scope">
                    <span v-show="scope.row.createtime == null"></span>
                    <span v-show="scope.row.createtime != null">{{ scope.row.createtime | dateFormat }}</span>
                </template> -->
      </el-table-column>
      <el-table-column
        align="center"
        prop="end_time"
        label="续保结束时间"
        width="180"
        show-overflow-tooltip
      >
        <!-- <template slot-scope="scope">
                    <span v-show="scope.row.createtime == null"></span>
                    <span v-show="scope.row.createtime != null">{{ scope.row.createtime | dateFormat }}</span>
                </template> -->
      </el-table-column>
      <el-table-column
        align="center"
        prop="time_len"
        label="续保时长"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="company_name"
        label="续保申请公司名称"
        width="180"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="create_time"
        label="申请时间"
        width="180"
        show-overflow-tooltip
      >
        <!-- <template slot-scope="scope">
                    <span v-show="scope.row.createtime == null"></span>
                    <span v-show="scope.row.createtime != null">{{ scope.row.createtime | dateFormat }}</span>
                </template> -->
      </el-table-column>
      <el-table-column
        align="center"
        prop="status_txt"
        label="状态"
        show-overflow-tooltip
      >
        <!-- <template slot-scope="scope">
                    <span v-show="scope.row.createtime == null"></span>
                    <span v-show="scope.row.createtime != null">{{ scope.row.createtime | dateFormat }}</span>
                </template> -->
      </el-table-column>
      <el-table-column
        align="center"
        label="操作"
        width="120"
        v-show="tabIndex == 2"
      >
        <template slot-scope="scope">
          <el-button
            v-show="scope.row.status == 2"
            size="mini"
            @click="xubao(scope.row)"
            >申请续保</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 上传资料 -->
    <el-dialog
      title="上传资料"
      :visible.sync="open"
      width="50%"
      :close-on-click-modal="false"
      v-dialogDrag
      custom-class="publicDialog"
    >
      <el-form ref="form" :model="form" label-width="80px" class="">
        <el-form-item label="会议名称 :">
          <el-select v-model="form.review_appraisal_id" placeholder="请选择">
            <el-option
              v-for="item in hyList"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传人 :">
          <el-select v-model="form.review_specialist_id" placeholder="请选择">
            <el-option
              v-for="item in zjList"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文件名称 :">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <!-- <el-form-item label="文件地址 :">
                    <el-input v-model="form.fileName"></el-input>
                </el-form-item> -->
        <el-form-item label="上传文件 :">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="http://192.168.0.28:8082/guarantee/gong/uploads"
            :file-list="fileList"
            :on-success="handleSuccessFile"
            name="image"
          >
            <el-button slot="trigger" size="small" type="primary"
              >选取文件</el-button
            >
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button type="" class="btn" @click="save">提交</el-button>
        <el-button type="" class="btn" @click="cancel">取消</el-button>
      </div>
    </el-dialog>

    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="params.page_limit"
        :current-page="params.page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 续保 -->
    <el-dialog
      title="续保"
      :visible.sync="open8"
      width="50%"
      append-to-body
      :close-on-click-modal="false"
      v-dialogDrag
      custom-class="publicDialog"
    >
      <el-form ref="form" :model="forms" :rules="rules" label-width="120px">
        <el-form-item label="保函申请编号 :">
          <el-input v-model="forms.apply_number"></el-input>
        </el-form-item>
        <!-- <el-form-item label="保函名称 :">
          <el-input v-model="forms.apply_name"></el-input>
        </el-form-item> -->
        <el-form-item label="申请事项 :">
          <el-input type="textarea" v-model="forms.apply_reason"></el-input>
        </el-form-item>
        <el-form-item label="续保金额 :">
          <el-input type="" v-model="forms.margin_amount"></el-input>
        </el-form-item>
        <el-form-item label="开始时间 :">
          <el-date-picker
            v-model="forms.begin_time"
            type="date"
            style="width:100%"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间 :">
          <el-date-picker
            v-model="forms.end_time"
            type="date"
              style="width:100%"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button @click="onSubmitXuBao" type="">提交</el-button>
        <el-button @click="open8 = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import { apply, xubaolists } from "@/api/daihou.js";
export default {
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      params: {
        offset: 1,
        limit: 10,
        keywords: "",
        status: "-1",
      },
      total: null,
      // 表单参数
      form: {
        review_appraisal_id: "",
        address: "",
        name: "",
        review_specialist_id: "",
      },
      // 表单校验
      rules: {},
      options1: [], //选择部门
      options2: [], //选择职位
      options3: [
        {
          value: "HTML",
          label: "HTML",
        },
        {
          value: "CSS",
          label: "CSS",
        },
        {
          value: "JavaScript",
          label: "JavaScript",
        },
      ], //选择小组
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    //   tableData: [],
  tableData :[
          {
            apply_name: "",
            apply_number: "202211081047202070283256515751",
            apply_reason: "12",
            begin_time: "2022-11-24 00:00",
            business_id: 0,
            business_name: "",
            check_cardname: "",
            check_id: 0,
            check_time: "",
            company_id: 0,
            company_name: "",
            create_time: "2022-11-19 11:08",
            end_time: "2022-11-25 00:00",
            ga_code: 123456789,
            guarantee_apply_id: 1154,
            guarantee_apply_number: "202211081047207150085256515751",
            handler_id: 0,
            handler_name: "我是谁",
            id: 4,
            margin_amount: "879465.00",
            origin_amount: "0.00",
            paylist: [],
            reject_content: null,
            status: 2,
            status_txt: "等待审核",
            time_len: "1天",
            update_time: "2022-11-19 11:08",
            user_cardname: "小明",
            user_id: 3,
          },
        ],
      multipleSelection: [],
      zjList: "",
      hyList: "",
      tabIndex: 0,
      activeIndex: "0",
      open8: false,
      forms: {
        apply_number: "",
        apply_reason: "",
        apply_name: "",
        margin_amount: "",
        begin_time: "",
        end_time: "",
      },
    };
  },
  created() {
    this.getList();
  },

  methods: {
    // 续保申请
    xubao(val) {
      this.forms = {
        apply_number: "",
        apply_reason: "",
        apply_name: "",
        margin_amount: "",
        begin_time: "",
        end_time: "",
      };
      this.open8 = true;
      this.forms.apply_number = val.apply_number;
    },
    //  续保申请 提交
    onSubmitXuBao() {
      console.log(this.forms);
      apply(this.forms).then((res) => {
        console.log(res);
        if (res.data.code == 1) {
          this.open8 = false;
          this.getWancheng();
          this.$message({
            message: res.data.msg,
            type: "success",
          });
        } else {
          this.$message({
            message: res.data.msg,
          });
        }
      });
    },
    // 获取专家列表
    getList() {
      xubaolists({ ...this.params }).then((res) => {
        console.log(res);
        this.tableData = res.data.data.rows
        
        this.total = res.data.data.total;
      });
    },
    companylist(num) {
      this.tabIndex = num;
      this.params.status = num;
      this.params.offset = 1;
      this.params.limit = 10;
      this.getList();
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.limit = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.offset = val;
      this.getList();
    },
    // 搜索
    seach() {
      this.params.offset = 1;
      this.params.limit = 10;
      this.getList();
    },
    shuaxin() {
      this.params.offset = 1;
      this.params.limit = 10;
      this.getList();
    },
    handleAdd() {
      this.open8 = true;
      this.forms = {
        apply_number: "",
        apply_reason: "",
        apply_name: "",
        margin_amount: "",
        begin_time: "",
        end_time: "",
      };
    },
    // 表单重置
    reset() {
      this.form = {};
    },
    // 提交表单
    save() {
      meetingAdd({ ...this.form }).then((res) => {
        console.log(res);
        if (res.code == 1) {
          this.open = false;
          this.getList();
          this.$message({
            message: res.msg,
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
          });
        }
      });
    },
    cancel() {
      // this.reset()
      this.open = false;
    },
    handleSelectionChange() {},
    // 上传文件
    handleSuccessFile(file) {
      console.log(file.data);
      this.form.address = file.data;
    },
  },
};
</script>
  
<style scoped lang="scss">
.body {
  height: calc(90vh - 60px);
  display: flex;
  flex-direction: column;
}

.table {
  width: 100%;
  // margin-top: 10px;
}

.block {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding-top: 0 !important;
  padding-bottom: 10px;
}

.el-menu--horizontal > .el-menu-item {
  height: 40px;
  line-height: 40px;
}

.el-menu.el-menu--horizontal {
  margin-bottom: 8px;
}
</style>
  